import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

// 导入全局样式
import './styles/main.css'

// 导入服务和工具
import { GameEngine, DatabaseService, EventSystem } from './services'

// 创建Vue应用实例
const app = createApp(App)

// 创建Pinia状态管理实例
const pinia = createPinia()

// 配置Pinia插件
pinia.use(({ store }) => {
  // 添加持久化插件
  if (store.$id !== 'temp') {
    const savedState = localStorage.getItem(`pinia-${store.$id}`)
    if (savedState) {
      try {
        const parsedState = JSON.parse(savedState)
        store.$patch(parsedState)
      } catch (error) {
        console.warn(`无法恢复存储 ${store.$id} 的状态:`, error)
      }
    }

    // 监听状态变化并保存
    store.$subscribe((mutation, state) => {
      try {
        localStorage.setItem(`pinia-${store.$id}`, JSON.stringify(state))
      } catch (error) {
        console.warn(`无法保存存储 ${store.$id} 的状态:`, error)
      }
    })
  }
})

// 全局错误处理
app.config.errorHandler = (error, instance, info) => {
  console.error('Vue应用错误:', error)
  console.error('错误信息:', info)
  console.error('组件实例:', instance)
  
  // 这里可以添加错误上报逻辑
  // 例如发送到错误监控服务
}

// 全局警告处理
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue应用警告:', msg)
  console.warn('组件追踪:', trace)
}

// 全局属性
app.config.globalProperties.$gameEngine = GameEngine
app.config.globalProperties.$database = DatabaseService
app.config.globalProperties.$events = EventSystem

// 开发环境配置
if (import.meta.env.DEV) {
  // 开发工具
  app.config.performance = true
  
  // 全局调试方法
  window.__VUE_APP__ = app
  window.__GAME_ENGINE__ = GameEngine
  window.__DATABASE__ = DatabaseService
  window.__EVENTS__ = EventSystem
  
  console.log('🚀 星际帝国 - 开发模式')
  console.log('Vue应用实例:', app)
  console.log('游戏引擎:', GameEngine)
}

// 生产环境配置
if (import.meta.env.PROD) {
  // 禁用开发工具
  app.config.devtools = false
  
  // 性能优化
  app.config.performance = false
  
  console.log('🌟 星际帝国 - 生产模式')
}

// 注册插件
app.use(pinia)
app.use(router)

// 全局组件注册
// 这里可以注册一些全局通用组件
// app.component('GlobalComponent', GlobalComponent)

// 全局指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.directive('click-outside', {
  beforeMount(el, binding) {
    el.clickOutsideEvent = (event: Event) => {
      if (!(el === event.target || el.contains(event.target as Node))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent)
  }
})

// 全局混入 (谨慎使用)
app.mixin({
  methods: {
    // 格式化数字的全局方法
    $formatNumber(num: number): string {
      if (num >= 1000000000) {
        return (num / 1000000000).toFixed(1) + 'B'
      }
      if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M'
      }
      if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K'
      }
      return num.toString()
    },
    
    // 格式化时间的全局方法
    $formatTime(seconds: number): string {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = Math.floor(seconds % 60)
      
      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
      }
      return `${minutes}:${secs.toString().padStart(2, '0')}`
    }
  }
})

// 应用初始化函数
async function initializeApplication() {
  try {
    console.log('🔧 初始化应用程序...')
    
    // 初始化数据库服务
    console.log('📊 初始化数据库服务...')
    await DatabaseService.initialize()
    
    // 初始化事件系统
    console.log('📡 初始化事件系统...')
    await EventSystem.initialize()
    
    // 初始化游戏引擎
    console.log('🎮 初始化游戏引擎...')
    await GameEngine.initialize()
    
    console.log('✅ 应用程序初始化完成')
    
    // 挂载Vue应用
    app.mount('#app')
    
    console.log('🎯 Vue应用已挂载')
    
  } catch (error) {
    console.error('❌ 应用程序初始化失败:', error)
    
    // 显示错误信息
    document.body.innerHTML = `
      <div style="
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: linear-gradient(135deg, #1a0a0a, #2a1a1a);
        color: white;
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 2rem;
      ">
        <div style="
          max-width: 500px;
          padding: 2rem;
          background: rgba(0, 0, 0, 0.6);
          border: 1px solid rgba(255, 107, 107, 0.3);
          border-radius: 12px;
        ">
          <div style="font-size: 4rem; margin-bottom: 1rem;">⚠️</div>
          <h2 style="color: #ff6b6b; margin-bottom: 1rem;">应用程序启动失败</h2>
          <p style="color: #cccccc; margin-bottom: 2rem; line-height: 1.5;">
            ${error instanceof Error ? error.message : '未知错误'}
          </p>
          <button onclick="window.location.reload()" style="
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, #00d4ff, #0099cc);
            color: #000000;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
          ">
            重新加载
          </button>
        </div>
      </div>
    `
  }
}

// 等待DOM加载完成后初始化应用
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initializeApplication)
} else {
  initializeApplication()
}

// 导出应用实例供调试使用
export default app